<template>
	<div v-if="flag" class='page-content flex-c pt-85' :style="{ height: screenHeight + 'px' }">
    <div class="content">
		  <!-- <img @click="onBackLink" class="back" src="https://content.daylucky.cn/admin/image/b42ik70gcghb8exvhriokvd8.png"> -->
      <div class="cont">
				<div mode="aspectFill" class="cont_bg" />
				<div class="cont_bg1"></div>
        <template v-if="active">
          <img src="http://content.daylucky.cn/admin/image/6zz789a1zma63io6ffpn4q18.png" alt="" class="aimate1">
          <img src="http://content.daylucky.cn/admin/image/6zz789a1zma63io6ffpn4q18.png" alt="" class="aimate2">
          <div class="animate3 flex_a_c">
            <p>{{ active === 1 ? '请心里想着你的问题或者事情，来查看我的答案哦' : '我的魔法会随着时间和主人你的心情变化而变化，如果有了新的事情和想法，可以再来找我'}}<img src="http://content.daylucky.cn/admin/image/z7xooekfpx57z26y4687r2k1.png" /></p>
          </div>
        </template>
			</div>
      <!-- <div class="title">魔镜魔镜告诉我</div> -->
    </div>
    <div class="list flex-r ">
      <div @click="onChooseRoles(true)" :class="['list_item', owned && 'on']">自 己</div>
      <div @click="onChooseRoles(false)" :class="['list_item', !owned && 'on']">TA 人</div>
    </div>
    <div class="tabs">
      <div 
        :class="['tab_list flex_center flex-c']"
        v-for="item in list.free_framework_list"
        @click="fnGetContent(item)"
        :key="item.content_type">
        {{ item.title }}
      </div>
    </div>
    <div v-if="list.pay_framework_list.length" class="pay_cont pb-18">
      <div class="pay_title flex_center">解锁全部板块</div>
      <div class="flex_b_c flex_wrap pl-15 pr-15">
        <div class="pay_list flex_center flex-c mb-8" v-for="item in list.pay_framework_list" :key="item.id">
          <img class="lock" src="http://content.daylucky.cn/admin/image/sejrzyqttjltctt9bil8hao1.png">
          {{ item.title }}
        </div>
      </div>
    </div>
    <div v-if="list.pay_framework_list.length" class="pay_btn" @click="onSubmit">9.9 元全部解锁</div>
    <content-mask :owned="owned" :isShow.sync="isShow" :content="current.content" :title="current.title" />
    <modifyInfo :isShow.sync="isShowAuth" :owned="owned" @on-success="fnGet(),isShowAuth = false" @on-fail="owned = !owned" />
	</div>
</template>
<script>
import contentMask from '@/components/v2/contentMask'
import { getTitle, getContentByType, orderPay } from '@/api'
// import onPay from '@/utils/payment'
import modifyInfo from '@/components/v2/modifyInfo'

export default {
  components: { 
    contentMask,
    modifyInfo,
  },
  data() {
    return {
      flag: false,
      active: 1, 
      current: {},
      list: {pay_framework_list: []},
      paySelfCard: false, // 是否支付自己得了
      owned: true,
      isShow: false,
      isShowAuth: false,
      cardLockObj: {},
      timer: null
    }
  },
  computed: {
  },
  mounted() {
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  onLoad({ owned }) {
    try {
      this.owned = JSON.parse(owned)
    } catch (error) {
      this.owned = true
    }
    this.fnGet()
  },
  methods: {
    async fnGet() {
      clearInterval(this.timer)
      console.log( this.owned, ' this.owned this.owned this.owned')
      let isIos = this.system === 'ios'
      const { code, data } = await getTitle({ owned: this.owned, isIos })
      if (code === 1000) {
        // this.list = data.pay_framework_list.concat(data.free_framework_list)
        let { pay_framework_list, free_framework_list } = data
        // 支付过自己的了
        if (this.paySelfCard && this.owned) {
          this.list = { free_framework_list: [ ...pay_framework_list, ...free_framework_list], pay_framework_list: [] }
        } else {
          this.list = { pay_framework_list, free_framework_list }
        }
        this.list.free_framework_list.forEach(({ content_type, content }) => {
          if (!this.cardLockObj[content_type] && content) {
            this.cardLockObj[content_type] = content
          }
        })
        this.flag = true
        this.$nextTick(() => {
          this.timer = setInterval(() => {
            let temp = this.active
            this.active = 0
            this.$nextTick(() => {
              this.active = temp === 1 ? 2 : 1
            })
          }, 8000)
        })
      }
    },
    async fnGetContent({ content_type, title }) {
      if (this.cardLockObj[content_type]) {
        this.current = { content: this.cardLockObj[content_type], title }
        this.isShow = true
        return false
      }
      uni.showToast({
        title: '魔镜分析中…请稍候',
        duration: 2500,
        icon: 'none'
      })
      setTimeout(async () => {
        const { code, data } = await getContentByType({ content_type, owned: this.owned })
        if (code === 1000) {
          this.cardLockObj[content_type] = data.content
          this.current = { content: data.content, title }
          this.isShow = true
        }
      }, 2500)
    },
    onChooseRoles(type) {
      if (this.owned === type) return
      this.current = {}
      if (type && this.$storage.getStorage('self_nick_name')) {
        this.owned = type
        this.fnGet()
      } else {
        this.owned = type
        this.isShowAuth = true
      }
    },
    async onSubmit() {
      const { code, data: {pay_data: data} } = await orderPay({ product_id: -1, pay_type: 10 });
      if (code === 1000) {
        uni.requestPayment({
          provider: "wxpay", //支付类型（小程序）
          appId: data.appId,
          timeStamp: data.timeStamp, //后端返回的时间戳
          nonceStr: data.nonceStr, //后端返回的随机字符串
          package: data.package, //后端返回的prepay_id
          signType: data.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
          paySign: data.paySign, //后端返回的签名
          success: (res) => {
            if (res.errMsg === "requestPayment:ok") {
              if (this.owned) {
                this.paySelfCard = true
              }
              let { pay_framework_list, free_framework_list } = this.list
              this.list = { free_framework_list: [ ...pay_framework_list, ...free_framework_list], pay_framework_list: [] }
            }
          },
          fail: (err) => {
            console.log("支付失败", err)
          }
        })
      }
      // onPay().then(() => {
      //   if (this.owned) {
      //     this.paySelfCard = true
      //   }
      //   let { pay_framework_list, free_framework_list } = this.list
      //   this.list = { free_framework_list: [ ...pay_framework_list, ...free_framework_list], pay_framework_list: [] }
      // })
    },
    // onBackLink() {
    //   this.$router.go(-1)
    // },
  }
}
</script>
<style lang="scss" scoped>
.page-content {
  padding-top: 10px;
  padding-bottom: 20px;
  min-height: 100vh;
	background: url('https://content.daylucky.cn/admin/image/zdbt5v95lvd6kcdov8xt0xvh.png') no-repeat left bottom/ 100% 100%;
}
.content {
  position: relative;

  .cont {
    width: 160rpx;
    height: 280rpx;
    margin: 0 auto 40rpx;
    position: relative;
    .cont_bg {
      position: absolute;
      width: 108rpx;
      height: 212rpx;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      -webkit-clip-path: ellipse(41% 50% at 50% 50%);
      clip-path: ellipse(41% 50% at 50% 50%);
      background:  url(https://content.daylucky.cn/admin/image/yh0f7gj55gwuumahqj8le0mq.gif) no-repeat left top / cover;
    }
    .cont_bg1 {
      position: absolute;
      background: url('https://content.daylucky.cn/admin/image/uhh6oxnhzxo7974p30xbyaqt.png') no-repeat top left/ cover;
      width: 100%;
      height: 100%;
    }
  }

}
.list {
  width: 546rpx;
  height: 96rpx;
  background: rgba(0,0,0,0.6);
  border-radius: 30px 30px 30px 30px;
  padding: 8rpx;
  margin: 32rpx auto 0;
  .list_item {
    width: 546rpx;
    height: 80rpx;
    background: rgba(0,0,0,0.6);
    border-radius: 60rpx ;
    font-size: 32rpx;
    color: #F6E9C9;
    line-height: 48rpx;
    line-height: 80rpx;
    text-align: center;
    &.on {
      background: #663E77;
    }
  }
}
.tabs {
  padding: 40rpx 50rpx 0px 50rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .tab_list {
    padding: 0 30rpx;
    white-space: pre-wrap;
    background: url('http://content.daylucky.cn/admin/image/9zn5kwoy4p1gn4i4gmvrhcwb.png') no-repeat left top/ 100% 100%;
    width: 312rpx;
    height: 200rpx;
    margin-bottom: 32rpx;
    text-align: center;
    font-size: 26rpx;
    font-weight: 600;
    color: #F6E9C9;
    line-height: 30rpx;
    &.on {
      background-image: url('http://content.daylucky.cn/admin/image/rjh9ulug1pnnm3k01dvclpeg.png');
      // border: 2px solid #FFB368;
    }
    .lock {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 8rpx;
    }
    .lock_txt {
      background: linear-gradient(180deg, #FFAD4E 0%, #D86100 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; 
    }
  }
}
.pay_btn {
  width: 620rpx;
  height: 96rpx;
  margin: 0 auto 0;
  text-align: center;
  line-height: 96rpx;
  font-weight: 600;
  font-size: 34rpx;
  color: #BB0E0E;
  text-align: center;
  background: url('http://content.daylucky.cn/admin/image/r6f1bh4qzcr0nbn99k95um2g.png') no-repeat left top/ cover;
 
}

.tc {
  text-align: center;
}
.flex1 {
  flex: 1;
}
.pay_cont {
  width: 646rpx;
  margin: 0 auto;
  background: url('http://content.daylucky.cn/admin/image/mc1slvm1h6jk7c9e39bknjs9.png') no-repeat left top / 100% auto ;
  .pay_title {
    width: 646rpx;
    font-weight: 600;
    font-size: 32rpx;
    line-height:42rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    text-align: center;
    line-height: 114rpx;
    font-style: normal;
    text-transform: none;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(1.048836341242112deg, #FD9A5A 0%, #EE926A 49%, #FD9A5A 100%);
    // background: linear-gradient(1.048836341242112deg, #FD9A5A 0%, #EE926A 49%, #FD9A5A 100%);
    &:before {
      content: '';
      width: 54rpx;
      height: 20rpx;
      display: inline-block;
      background: url('http://content.daylucky.cn/admin/image/whjp71jibgdyt7r5ynvwhg66.png') no-repeat left top/ cover;
      margin-right: 20rpx;
    }
     &:after {
      content: '';
      width: 54rpx;
      height: 20rpx;
      display: inline-block;
      background: url('http://content.daylucky.cn/admin/image/8mhc4d5l6y0hvmmhmqswtxoz.png') no-repeat left top/ cover;
      margin-left: 20rpx;
    }
  }
  .pay_list {
    width: 286rpx;
    height: 188rpx;
    padding: 0 30rpx;
    background: url('http://content.daylucky.cn/admin/image/vdo9akbrd949pudxhmjibwo3.png') no-repeat left top/ 100% 100%;
    font-weight: 600;
    font-size: 26rpx;
    color: #FD9A5A;
    line-height: 30rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    .lock {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 8rpx;
    }
  }
}
.animate3 {
  padding-top: 14rpx;
  opacity: 0;
  animation: animate3 .3s linear forwards; 
  animation-delay: 1s;
  top: 108rpx;
  left: 134rpx;
  position: absolute;
  padding-left: 28rpx;
  padding-right: 18rpx;
  width: 266rpx;
  height: 226rpx;
  background: url('http://content.daylucky.cn/admin/image/3o6fyqxyruq91cwmt6dplcj2.png') no-repeat left top/ 266rpx 226rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: rgba(255,255,255,0.6);
  line-height: 36rpx;
  img {
    width: 32rpx;
    height: 32rpx;
    vertical-align: -8rpx;
    margin-left: 4rpx;
  }

}
.aimate2 {
  opacity: 0;
  left: 108rpx;
  top: 168rpx;
  animation: animate2 .3s linear forwards; 
  animation-delay: 1s;
  position: absolute;
  width: 26rpx;
  height: 26rpx;
}
.aimate1 {
  opacity: 0;
  left: 90rpx;
  top: 166rpx;
  animation: animate1 .3s linear forwards; 
  animation-delay: 1s;
  position: absolute;
  width: 14rpx;
  height: 14rpx;
}
@keyframes animate1 {
  0% {
    left: 90rpx;
    top: 166rpx;
    opacity: 0;
  }
  100% {
    left: 100rpx;
    top: 176rpx;
    opacity: 1;
  }
}
@keyframes animate2 {
  0% {
    left: 108rpx;
    top: 168rpx;
    opacity: 0;
  }
  100% {
    left: 122rpx;
    top: 184rpx;
    opacity: 1;
  }
}
@keyframes animate3 {
  0% {
    top: 108rpx;
    left: 134rpx;
    opacity: 0;
  }
  100% {
    top: 122rpx;
    left: 146rpx;
    opacity: 1;
  }
}
</style>